<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="我参与的帖子">
        <div
          v-for="(item, index) in joinlist"
          :key="index"
          style="
            margin-top: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            position: relative;
          "
        >
          <router-link
            :to="{ path: '/detail', query: { id: item.postsId } }"
            tag="div"
          >
            <!--                        <p style="font-size: 24px;font-weight: bold;margin-bottom: 5px;">{{item.title}}</p>-->
            <van-row>
              <van-col span="4"
                ><img
                  style="width: 50px; height: 50px; border-radius: 50%"
                  :src="item.avatar"
                  alt=""
              /></van-col>

              <van-col span="1"></van-col>
              <van-col
                span="8"
                style="height: 50px; line-height: 50px; font-size: 18px"
                ><span>{{ item.userName }}</span></van-col
              >
            </van-row>
            <p class="content" style="padding-left: 10px; margin-top: 5px">
              {{ item.intro }}
            </p>
            <p style="width: 95%; height: 250px; overflow: hidden">
              <img :src="item.coverImgUrl" alt="" style="width: 100%" />
            </p>
            <van-tag
              plain
              type="primary"
              size="large"
              style="margin-right: 20px"
              >赞：{{ item.zan }}</van-tag
            >
            <van-tag
              plain
              type="primary"
              size="large"
              style="position: absolute; right: 10px"
              >阅读量：{{ item.readNum }}</van-tag
            >
          </router-link>
        </div>
      </van-tab>
      <van-tab title="修改资料">
        <ul class="info">
          <li>
            <h3>昵称</h3>
            <van-cell is-link @click="showPopup4"
              ><van-tag type="primary" size="large">修改</van-tag></van-cell
            >
            <van-popup v-model="show4">
              <van-form @submit="onSubmit4">
                <van-field
                  v-model="username"
                  name="userName"
                  label="昵称"
                  placeholder="昵称"
                  :rules="[{ required: true, message: '请填写昵称' }]"
                />
                <div style="margin: 16px">
                  <van-button round block type="info" native-type="submit"
                    >提交</van-button
                  >
                </div>
              </van-form>
            </van-popup>
            <p>{{ $store.state.data.userName }}</p>
          </li>
          <li>
            <h3>手机号</h3>
            <van-cell is-link @click="showPopup3"
              ><van-tag type="primary" size="large">修改</van-tag></van-cell
            >
            <van-popup v-model="show3">
              <van-form @submit="onSubmit3">
                <van-field
                  v-model="phonenumber"
                  name="phonenumber"
                  label="手机号"
                  placeholder="手机号"
                  pattern="^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$"
                  :rules="[{ required: true, message: '请填写手机号' }]"
                />
                <div style="margin: 16px">
                  <van-button round block type="info" native-type="submit"
                    >提交</van-button
                  >
                </div>
              </van-form>
            </van-popup>
            <p>{{ $store.state.data.phonenumber }}</p>
          </li>
          <li>
            <h3>
              性别
              <van-tag type="primary" @click="changSex" size="large"
                >修改</van-tag
              >
            </h3>
            <p v-if="sex">男</p>
            <p v-else>女</p>
          </li>
          <li>
            <h3>个人简介</h3>
            <van-cell is-link @click="showPopup1"
              ><van-tag type="primary" size="large">修改</van-tag></van-cell
            >
            <van-popup v-model="show1">
              <van-form @submit="onSubmit1">
                <van-field
                  v-model="remark"
                  name="remark"
                  label="个人简介"
                  placeholder="个人简介"
                  :rules="[{ required: true, message: '请填写个人简介' }]"
                />
                <div style="margin: 16px">
                  <van-button round block type="info" native-type="submit"
                    >提交</van-button
                  >
                </div>
              </van-form>
            </van-popup>
            <p v-if="$store.state.data.remark">
              {{ $store.state.data.remark }}
            </p>
            <p v-else>主人很懒，什么也没有留下</p>
          </li>
          <li>
            <p
              style="width: 200px; text-align: center"
              v-if="$store.state.data.avatar"
            >
              <img style="width: 100%" :src="$store.state.data.avatar" alt="" />
            </p>
            <p
              v-else
              style="
                width: 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: #eee;
              "
            >
              <span>暂无头像</span>
            </p>
            <a-upload
              name="file"
              :multiple="true"
              @change="handleChange"
              :show-upload-list="false"
            >
              <a-button>
                <a-icon type="upload" />
                更改头像
              </a-button>
            </a-upload>
          </li>
          <li style="margin-top: 10px">
            <van-button
              color="linear-gradient(to bottom, #0075B7, #23AAF2)"
              @click="back"
            >
              退出登录
            </van-button>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { updateUserAvatar, getuserinfo } from "../api/api";
import { joinList } from "../api/api";
import { updateUser } from "../api/api";
import { Back } from "../api/api";

export default {
  name: "MineTab",
  data() {
    return {
      sex: 0,
      active: 0,
      //遮罩层是否显示
      show1: false,
      show3: false,
      show4: false,
      username: this.$store.state.data.username,
      password: "",
      remark: this.$store.state.data.remark,
      phonenumber: this.$store.state.data.phonenumber,
      joinlist: {},
      avatar: this.$store.state.data.avatar,
    };
  },
  methods: {
    changSex() {
      if (this.sex === 0) {
        this.sex = 1;
      } else {
        this.sex = 0;
      }
      updateUser(
        this.$store.state.data.sex,
        this.$store.state.data.phonenumber,
        this.$store.state.data.userName,
        this.$store.state.data.remark
      ).then(() => {
        // console.log(res);
        this.show4 = false;
        this.$store.commit("changesex", { sex: this.sex });
      });
    },
    back() {
      Back().then((res) => {
        // console.log(res);
        if (res.code === "403") {
          this.$router.push("/");
          this.$store.commit("changeActive", { active: 0 });
          this.$store.commit("changeLogin", { isLogin: false });
        }
      });
    },
    onSubmit3(values) {
      // console.log("submit", values);
      updateUser(
        this.$store.state.data.sex,
        values.phonenumber,
        this.$store.state.data.userName,
        this.$store.state.data.remark
      ).then(() => {
        // console.log(res);
        this.show3 = false;
        this.$store.commit("changephonenumber", {
          phonenumber: values.phonenumber,
        });
      });
    },
    onSubmit4(values) {
      // console.log("submit", values);
      updateUser(
        this.$store.state.data.sex,
        this.$store.state.data.phonenumber,
        values.userName,
        this.$store.state.data.remark
      ).then(() => {
        // console.log(res);
        this.show4 = false;
        this.$store.commit("changeuserName", { userName: values.userName });
      });
    },
    callback(val) {
      console.log(val);
    },
    handleChange(info) {
      // console.log(this.avatar);
      // console.log(info)
      updateUserAvatar(info.file.originFileObj).then((res) => {
        // console.log(res);
        if (res.code === 0) {
          getuserinfo().then((res) => {
            this.$store.commit("changeLogin", { data: res.data });
          });
        }
      });
    },
    showPopup1() {
      this.show1 = true;
      this.show3 = false;
      this.show4 = false;
    },
    showPopup3() {
      this.show3 = true;
      this.show2 = false;
      this.show1 = false;
      this.show4 = false;
    },
    showPopup4() {
      this.show4 = true;
      this.show2 = false;
      this.show3 = false;
      this.show1 = false;
    },
    onSubmit1(values) {
      // console.log("submit", values);
      // this.$store.dispatch('getremark',{remark:values.remark})
      // this.show1=false
      updateUser(
        this.$store.state.data.sex,
        this.$store.state.data.phonenumber,
        this.$store.state.data.userName,
        values.remark
      ).then(() => {
        // console.log(res);
        this.show1 = false;
        this.$store.commit("changeremark", { remark: values.remark });
      });
    },
  },
  // created() {
  //   this.$store.dispatch("getLogin");
  //   // joinList().then((res) => {
  //   //   // console.log(res);
  //   //   this.joinlist = res.rows;
  //   // });
  // },
  mounted() {
    this.$store.dispatch("getLogin");
    joinList().then((res) => {
      // console.log(res)
      this.joinlist = res.rows;
    });
  },
};
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
/deep/ .van-tabs__content {
  width: 95%;
  padding: 10px 25px;
}

.content {
  overflow: hidden;

  display: -webkit-box;

  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  white-space: normal;
}
/deep/.van-field {
  width: 350px;
  height: 48px;
}
/deep/.van-cell__right-icon {
  display: none;
}
li {
  position: relative;
}
/deep/.van-cell--clickable {
  width: 44px;
  padding: 0;
  height: 24px;
  position: absolute;
  top: 2px;
  left: 70px;
  border-radius: 4px;
}
/deep/.van-field--error {
  height: 53px;
}
/deep/.van-tabs__line {
  background-color: #3296fa;
}
</style>